<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- #ifdef H5 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px',backgroundColor:t('color1') }">
			<view class="nav-content">
				<view class="back-btn" @tap="goBack">
					<text class="icon">←</text>
				</view>
				<text class="title">{{ cinemaName }}</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- 影院信息 -->
		<view class="cinema-info">
			<view class="cinema-name">{{ cinemaName }}</view>
			<view class="cinema-address">{{ address }}</view>
			<view class="cinema-address">{{ tel }}</view>
			<!-- 			<view class="cinema-tags">
				<text class="tag" v-for="(tag, index) in tags" :key="index">{{ tag }}</text>
			</view> -->
		</view>

		<!-- 电影列表区域 -->
		<view class="movie-section">
			<!-- 电影海报滚动 -->
			<scroll-view class="movie-scroll" scroll-x :show-scrollbar="false">
				<view class="movie-list">
					<view class="movie-item" v-for="(item, index) in movieList" :key="index"
						:class="{ active: currentIndex === index }"
						:style="{ transform: `scale(${currentIndex === index ? 1.1 : 0.9})` }"
						@tap="selectMovie(index)">
						<image class="movie-poster" :src="item.imgUrl" mode="aspectFill" />
						<!--                        <view class="movie-info" v-if="currentIndex === index">
                            <text class="movie-name">{{ item.name }}</text>
                            <text class="movie-score" v-if="item.score">{{ item.score }}分</text>
                        </view> -->
					</view>
				</view>
			</scroll-view>

			<!-- 当前电影基本信息 -->
			<view class="movie-basic-info" v-show="movieList.length > 0">
				<view class="info-row">
					<text class="movie-name">{{ movieList[currentIndex].filmName }}</text>
					<text class="movie-score" :style="{color:t('color1')}">{{ movieList[currentIndex].score }}分</text>
				</view>
				<view class="info-desc">
					<text>{{ movieList[currentIndex].filmTypes }}</text>
					<text class="separator">|</text>
					<text>{{ movieList[currentIndex].duration }}分钟</text>
				</view>
			</view>
		</view>

		<!-- 日期选择 -->
		<scroll-view class="date-scroll" scroll-x :show-scrollbar="false" v-if="movieList[currentIndex].dates && movieList[currentIndex].dates.length > 0">
			<view class="date-list">
				<view class="date-item" :style="{backgroundColor:currentDateIndex === index ? t('color1') : ''}" v-for="(date, index) in movieList[currentIndex].dates" :key="index"
					:class="{ active: currentDateIndex === index }" @tap="selectDate(index)">
					<text class="day">{{ date.day }}</text>
					<text class="date">{{ date.date }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 场次列表 -->
		<scroll-view class="schedule-list" scroll-y>
			<view v-show="!scheduleList || scheduleList.length == 0" style="text-align: center;">
				当前电影没有排期
			</view>
			<view class="schedule-item" v-for="(item, index) in scheduleList" :key="index">
				<view class="time-info">
					<text class="start-time">{{ item.startTime.slice(11) }}</text>
					<text class="end-time">{{ item.endTime.slice(11) }}散场</text>
				</view>
				<view class="middle-info">
					<text class="hall-name">{{ item.hallName }}</text>
					<text class="language">{{ item.language }}</text>
					<text class="version">{{ item.version }}</text>
				</view>
				<view class="price-info">
					<view class="price">
						<text class="symbol">¥</text>
						<text class="number" :style="{color:t('color1')}">{{ item.showPrice }}</text>
					</view>
					<button :style="{backgroundColor:t('color1')}" class="buy-btn" @tap="buyTicket(item)">购票</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			statusBarHeight: 20,
			cinemaName: '',
			address: '',
			tel: '',
			tags: ['改签', '退票', '小吃'],
			currentIndex: 0,
			currentDateIndex: 0,
			movieList: [],
			dateList: [],
			scheduleList: [],
			cinemaId: null,
			filmName: null
		}
	},

	onLoad(opt) {
		this.cinemaId = opt.cinemaId
		this.filmName = opt.filmName
		this.getdata();
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	},

	onPullDownRefresh() {
		this.getdata();
	},

	methods: {
		selectMovie(index) {
			this.currentIndex = index;
			this.currentDateIndex = 0;
			this.selectDate(0);
		},

		selectDate(index) {
			this.currentDateIndex = index
			this.scheduleList = this.movieList[this.currentIndex].dates[this.currentDateIndex]?.list
		},

		buyTicket(item) {
			const params = {
				cinemaId: this.cinemaId,
				showId: item.showId,
				cinemaName: this.cinemaName,
				filmName: this.movieList[this.currentIndex].filmName,
				time: this.getftime(item.startTime, item.endTime),
				lv: item.language + ' ' + item.version,
				hallName: item.hallName,
				pic: this.movieList[this.currentIndex].imgUrl
			};
			const encodedParams = encodeURIComponent(JSON.stringify(params));
			uni.navigateTo({
				url: `/pagesZone/movie/seats?params=${encodedParams}`
			})
		},

		getftime(st, et) {
			if (st && et) {
				const date = st.split(' ')[0];
				const startTime = st.split(' ')[1].substring(0, 5);
				const endTime = et.split(' ')[1].substring(0, 5);
				return `${date} ${startTime}~${endTime}`;
			}
			return '';
		},

		getdata() {
			let that = this;
			that.loading = true;
			app.showLoading('加载中');
			app.get('/film/get_cinema_show?cinemaId=' + this.cinemaId, {}, function (res) {
				that.loading = false;
				if (res && res.status == 200) {
					let movieData = res.data;

					// 如果有指定电影名，将该电影移到第一位
					if (that.filmName) {
						const movieIndex = movieData.findIndex(movie => movie.filmName === that.filmName);
						if (movieIndex !== -1) {
							// 将找到的电影移到数组第一位
							const targetMovie = movieData.splice(movieIndex, 1)[0];
							movieData.unshift(targetMovie);
						}else{
							//app.showLoading(false);
							app.alert("该影院没有这部电影的排期~");
							// setTimeout(() => {
							// 	uni.navigateBack();
							// }, 1700);
						}
					}

					that.movieList = movieData;
					that.cinemaName = that.movieList[0].cinemaName;
					that.tel = that.movieList[0].tel;
					uni.setNavigationBarTitle({
						title: that.cinemaName
					});
					that.address = that.movieList[0].address;

					// 直接选择第一个电影（现在第一个就是目标电影）
					that.selectMovie(0);
					app.showLoading(false);
				} else {
					app.showLoading(false);
					app.error("数据加载错误：" + res.msg);
					setTimeout(() => {
						uni.navigateBack();
					}, 1700);
				}
				that.loaded();
			});
		},

		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.custom-nav {
	background-color: #ba1f25;
	padding: 0 20rpx;

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;

		.back-btn {
			padding: 20rpx;
			margin-left: -20rpx;

			.icon {
				color: #fff;
				font-size: 36rpx;
			}
		}

		.title {
			flex: 1;
			color: #fff;
			font-size: 32rpx;
			text-align: center;
			margin-right: 56rpx;
		}
	}
}

.cinema-info {
	background: #fff;
	padding: 30rpx 20rpx;

	.cinema-name {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}

	.cinema-address {
		font-size: 26rpx;
		color: #666;
		margin: 10rpx 0;
	}

	.cinema-tags {
		margin-top: 16rpx;

		.tag {
			display: inline-block;
			font-size: 22rpx;
			color: #ba1f25;
			border: 1px solid #ba1f25;
			padding: 4rpx 12rpx;
			border-radius: 4rpx;
			margin-right: 12rpx;
		}
	}
}

.movie-section {
	background: #fff;
	margin: 20rpx 0;
}

.movie-scroll {
	height: 400rpx;

	.movie-list {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 20rpx;

		.movie-item {
			flex-shrink: 0;
			width: 200rpx;
			margin: 0 10rpx;
			transition: all 0.3s ease;
			transform-origin: center center;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.active {
				z-index: 1;

				.movie-poster {
					border: 4rpx solid #ba1f25;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
				}

				.movie-info {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.movie-poster {
				width: 200rpx;
				height: 280rpx;
				border-radius: 8rpx;
				transition: all 0.3s ease;
			}

			.movie-info {
				width: 200rpx;
				text-align: center;
				margin-top: 10rpx;
				opacity: 0;
				transform: translateY(10rpx);
				transition: all 0.3s ease;

				.movie-name {
					font-size: 26rpx;
					color: #333;
					display: block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.movie-score {
					font-size: 24rpx;
					color: #ba1f25;
				}
			}
		}
	}
}

.movie-basic-info {
	padding: 20rpx 30rpx;
	border-bottom: 1rpx solid #f5f5f5;

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		.movie-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-right: 20rpx;
		}

		.movie-score {
			font-size: 28rpx;
			color: #ba1f25;
			font-weight: bold;
		}
	}

	.info-desc {
		font-size: 26rpx;
		color: #666;

		.separator {
			margin: 0 10rpx;
			color: #ddd;
		}
	}
}

.date-scroll {
	background: #fff;
	padding: 20rpx 0;

	.date-list {
		display: flex;
		padding: 0 20rpx;

		.date-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 40rpx;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
			white-space: nowrap;

			&.active {
				background: #ba1f25;

				.day,
				.date {
					color: #fff;
				}
			}

			.day {
				font-size: 28rpx;
				color: #333;
			}

			.date {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}
	}
}

.schedule-list {
	height: calc(100vh - 750rpx);

	.schedule-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		background: #fff;
		margin-bottom: 2rpx;

		.time-info {
			.start-time {
				font-size: 34rpx;
				color: #333;
				font-weight: bold;
				display: block;
			}

			.end-time {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
			}
		}

		.middle-info {
			flex: 1;
			margin-left: 40rpx;

			.hall-name {
				font-size: 28rpx;
				color: #333;
				display: block;
			}

			.language {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
				display: inline-block;
			}

			.version {
				font-size: 24rpx;
				color: #999;
				margin-top: 6rpx;
				margin-left: 8rpx;
				display: inline-block;
			}
		}

		.price-info {
			text-align: center;

			.price {
				.symbol {
					font-size: 24rpx;
					color: #ba1f25;
				}

				.number {
					font-size: 34rpx;
					color: #ba1f25;
					font-weight: bold;
				}
			}

			.buy-btn {
				margin-top: 10rpx;
				width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				color: #fff;
				background: #ba1f25;
				border-radius: 28rpx;
			}
		}
	}
}
</style>